<template>
  <div style="width:100%;box-sizing: border-box;padding:10px;">
    <span class="_before">堆场详情</span>
    <el-row style="margin-left: 20px;">
      <el-col :span="6" class="marginTop10">堆场编号：{{ yardInfo.yardNum }}</el-col>
      <el-col :span="6" class="marginTop10">堆场名称：{{ yardInfo.yardName }}</el-col>
      <el-col :span="6" class="marginTop10">所在城市：{{ yardInfo.cityName }}</el-col>
      <el-col :span="6" class="marginTop10">经营方：{{ yardInfo.yardCompanyName }}</el-col>
      <el-col :span="6" class="marginTop10">当前库存：{{ yardInfo.nowInventory }}</el-col>
      <el-col :span="6" class="marginTop10">堆场地址：{{ yardInfo.yardAddress }}</el-col>
      <el-col :span="6" class="marginTop10">可用库存：{{ yardInfo.inventory }}</el-col>
      <el-col :span="6" class="marginTop10">预配库存：{{ yardInfo.allocationInventory }}</el-col>
      <el-col :span="6" class="marginTop10">总箱量：{{ yardInfo.totalBox }}</el-col>
      <el-col :span="6" class="marginTop10">在途箱量：{{ yardInfo.onRouteBox }}</el-col>
      <el-col :span="6" class="marginTop10">堆场作业时间：{{ yardInfo.workTime }}</el-col>
      <el-col :span="6" class="marginTop10" style="color: #2158F3;">状态：{{ { 5: '停用', 10: '已堆存', 15: '未堆存' }[yardInfo.status]}}</el-col>
      <el-col :span="6"  class="marginTop10">国家：{{ yardInfo.countryName }}</el-col>
      <el-col :span="6"  class="marginTop10">创建日期：{{ formatDate(yardInfo.createTime,4) }}</el-col>
      <el-col :span="24"  class="marginTop10" style="position: relative;">
        <span style="position: absolute;top: 0;" >附件：</span>
        <UploadFilesImages ref="attachmentRef1" :urlList="urlList" :limit="10" :fileSize="10" :displayType="0" :type="'jpg/png/jpeg/pdf'"></UploadFilesImages>
      </el-col>
      <el-col :span="24"  class="marginTop10 marginBottom20">备注：{{ yardInfo.remark || "--" }}</el-col>
    </el-row>

    <span class="_before">联系人</span>
    <el-row :gutter="10" align="center" style="margin-left: 20px;">
      <el-col v-for="(item,index) in yardContacts" :span="8"  :key="index">
          <el-row class="box_div box_div_contact">
              <el-col :span="24">联系人：{{ item.contacts || '无' }}</el-col>
              <el-col :span="24" class="marginTop10">联系电话： {{ '+' + item.areaCode }}-{{ item.tel }}</el-col>
              <el-col :span="24" class="marginTop10">邮箱：{{ item.email || '无' }}</el-col>
          </el-row>
      </el-col>
    </el-row>
    <span class="_before displayBlock marginTop10">堆存费信息</span>
    <el-table :data="yardInfo.priceList"  style="width: 100%" class="marginTop20" >
        <el-table-column prop="boxType" label="箱型" width="130" align="center">
          <template #default="scope">
            <span v-if="scope.row.boxType==5">20GP/HQ</span>
            <span v-if="scope.row.boxType==10">40GP/HQ</span>
          </template>
        </el-table-column>
        <el-table-column prop="boxState" label="箱状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.boxType==5">空箱</span>
            <span v-if="scope.row.boxType==10">重箱</span>
          </template>
        </el-table-column>
        <el-table-column prop="overdueFeeDay" label="超期1天后（$/箱/天）" align="center"  width="160">
          <template #default="scope">
            <!-- <el-input v-model.trim="scope.row.overdueFeeDay" disabled  placeholder="请输入"  oninput="value = value.replace(/[^\d]/g, '').replace(/^0+/, '')"></el-input> -->
            <span>{{scope.row.overdueFeeDay}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="freeStorage" label="免堆期" align="center">
          <template #default="scope">
            <!-- <el-input v-model.trim="scope.row.freeStorage" disabled  placeholder="请输入" oninput="value = value.replace(/[^\d]/g, '').replace(/^0+/, '')">
              <template #suffix>天</template>
            </el-input> -->
            <span>{{scope.row.freeStorage}}天</span>
          </template>
        </el-table-column>
        <el-table-column prop="currency" label="结算币种" align="center">
          <template #default="scope">
            <!-- <el-select v-model="scope.row.currency" disabled >
              <el-option value="USD" label="$"></el-option>
              <el-option value="CNY" label="￥"></el-option>
            </el-select> -->
            <span>
              <template v-if="scope.row.currency=='USD'">美元（$）</template>
              <template v-if="scope.row.currency=='CNY'">人民币（￥）</template>
            </span>
          </template>
        </el-table-column>
       
        <el-table-column prop="liftingFee" label="吊装费" align="center">
          <template #default="scope">
            <!-- <el-input v-model.trim="scope.row.liftingFee" disabled  placeholder="请输入" >
              <template #prefix>
                <span>{{ { USD: '$', CNY: '￥' }[scope.row.currency] }}</span>
              </template>
            </el-input> -->
            <span>{{ { USD: '$', CNY: '￥' }[scope.row.currency] }}{{scope.row.liftingFee}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="fallBoxFee" label="倒箱费" align="center">
          <template #default="scope">
            <!-- <el-input v-model.trim="scope.row.fallBoxFee" disabled  placeholder="请输入" >
              <template #prefix>
                <span>{{ { USD: '$', CNY: '￥' }[scope.row.currency] }}</span>
              </template>
            </el-input> -->
            <span>{{ { USD: '$', CNY: '￥' }[scope.row.currency] }}{{scope.row.fallBoxFee}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="otherFee" label="其它费用" align="center">
          <template #default="scope">
            <!-- <el-input v-model.trim="scope.row.otherFee" disabled  placeholder="请输入">
              <template #prefix>
                <span>{{ { USD: '$', CNY: '￥' }[scope.row.currency] }}</span>
              </template>
            </el-input> -->
            <span>{{ { USD: '$', CNY: '￥' }[scope.row.currency] }}{{scope.row.otherFee}}</span>
          </template>
        </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/index'
import { computed } from 'vue';
import UploadFilesImages from '@/components/upload/uploadFiles-Images'


const props = defineProps({
  yardInfo: {
    type: Object,
    default: () => ({})
  }
})

const yardContacts = computed(() => {
  return JSON.parse(props.yardInfo.yardContacts)
})
const urlList = computed(() => {
  try { 
    return JSON.parse(props.yardInfo.fileList)
  }catch(e) {
    return []
  }
})

</script>

<style scoped>
  .box_div {
      box-sizing: border-box;
      padding: 10px;
      margin: auto;
  }

  .box_div_contact {
    background-color: #F8F8F8;
    overflow: hidden;
    word-break: break-all;
    margin-top: 10px;
    border-top: 3px solid #2158F3;
  }
</style>
